<%
if (session.getAttribute("username") == null) {
	%><jsp:forward page="/DBP/login.jsp" /><%
}

String pollid = (String)session.getAttribute("pollid");
String pollname = (String)session.getAttribute("pollName");
%>
<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">  
<head>  
	<meta http-equiv="content-type" name="viewport" content="initial-scale=1.0, user-scalable=no" />  
	 <style type="text/css">
	  html { height: 100% }
	  body { height: 100%; margin: 0; padding: 0 }
	  #map_canvas { height: 100% }
	</style>
 	<link rel="stylesheet" href="/DBP/style/stylesheet.css" type="text/css" />
	<script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script>
	<script type="text/javascript">  
		var map;
		var geocoder;
		var coordMarker;
		var infoWindow;
		function initialize() {   
			var latlng = new google.maps.LatLng(-33.86890, 151.20709);
			 geocoder = new google.maps.Geocoder();
		    var myOptions = {
		      zoom: 5,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		    infoWindow = new google.maps.InfoWindow();
		    coordMarker = new google.maps.Marker({
		        map: map,
		        title:"",
		        animation: google.maps.Animation.BOUNCE
		    });
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
			google.maps.event.addListener(map, "click", function(event) {
			    var myHtml = "<p style=\"width:100px\">Latitude: " + event.latLng.lat() + "</p><p>Longitude: " + event.latLng.lng() +"</p>";	
				infoWindow = new google.maps.InfoWindow({
			        content: myHtml,
			        maxWidth: 1000
			    });
			    coordMarker.setPosition(event.latLng);
			    coordMarker.setMap(map);
			    infoWindow.setPosition(event.latLng);
			    infoWindow.setContent(myHtml);
				infoWindow.open(map,coordMarker);
			    document.getElementById("lati").value = latlng.lat();
				document.getElementById("longi").value = latlng.lng();
		    });
		}

		function codeAddress() {
		    var address = document.getElementById("address").value;
		    alert(address);
		    geocoder.geocode( { 'address': address}, function(results, status) {
		      if (status == google.maps.GeocoderStatus.OK) {
		        map.setCenter(results[0].geometry.location);
		        map.setZoom(15);
		        var myHtml = "Latitude: " + results[0].geometry.location.lat() + "<br/>Longitude: " + results[0].geometry.location.lng() ;	
		        infoWindow.setPosition(results[0].geometry.location);
			    infoWindow.setContent(myHtml);
				infoWindow.open(map,coordMarker);
		        coordMarker.setPosition(results[0].geometry.location);
			    coordMarker.setMap(map);	
			    document.getElementById("lati").value = latlng.lat();
				document.getElementById("longi").value = latlng.lng();	        
		      } else {
		        alert("Geocode was not successful for the following reason: " + status);
		      }
		    });
		  }
		
		
		 function foo(){
			out.println("here!");
		 	var lat = latlng.lat();
		 	var lng = latlng.lng();
		 	header.setRedirect("addLoc.jsp?lat="+lat+"&lng="+lng+"&pollid=0");
		 }
		 
		function addAddressToMap(response) {   
			map.clearOverlays();   
			if (!response || response.Status.code != 200) {   
				alert("Sorry, we were unable to geocode that address");   
			} else {   
				place = response.Placemark[0];   
				point = new GLatLng(place.Point.coordinates[1],   
				place.Point.coordinates[0]);   
				marker = new GMarker(point);   
				map.addOverlay(marker);   
				marker.openInfoWindowHtml('The Place you entered: '+place.address);   
			}   
		}   
		  
		function showLocation() {   
			var address = document.forms[0].q.value;   
			geocoder.getLocations(address, addAddressToMap);   
		}   
		
		function getLat(){
			return latlng.lat();
		}
	</script>
</head>  
  <%//onunload="GUnload()" %>
<body onload="initialize()" >  
<div class="bg">
<div class="content">  
<jsp:include page="/nav.jsp"/>
<div class="entrytitle">
<div class="entry">
	<form action="#" onsubmit="codeAddress(); return false;">  
	<p>  
	<b>Search for an address to assign to <%=pollname%>:</b>  
	<input type="text" name="q" value="" class="address_input" id="address" size="40" />  
	<input type="submit" name="find" class="button" style="display:inline"value="Search" />
	<input name="qhelp" type="button" style="font-size:8pt;color:white;background-color:lightblue;border:none;" value="Quick Help">
	</p>  
	</form>  
	<div id="map_canvas" style="width: auto; min-height: 500px"></div>  	
	<form action="mappingservlet" method="post">
		<input type="hidden" name="Lat" value="" id="lati" />
		<input type="hidden" name="Lng" value="" id="longi"/>
		<input type="hidden" name="pollid" value="<%=pollid %>" />
		<input type="submit"class="button" value="Submit" />
	</form>
	</div>
	</div>
</div></div>
<style>
#onlinehelp{position:absolute;display:none;z-index:2;border:5px solid lightblue;background-color:#33aecc;color:white}
</style>
<div id="onlinehelp"></div>
<script>
var gg = document.getElementsByName("qhelp");
var ei = document.getElementById("onlinehelp");
for(i=0; i<gg.length; i++){
 var ts = gg[i];
 ts.onmousemove = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '1. Leave it for now<br> * For more help please click the button';
  ei.style.top  = document.body.scrollTop + event.clientY  -125 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX  +35 + "px";
 }
 ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
 }
 ts.onclick = function(){
	 location.href="/DBP/OnlineHelp/ModifyAccount.jsp";
 }
}
</script>
</body>  
</html>